<template>
	<!-- 专家主页 -->
	<view class="container">
		<scroll-view
			class="scroll-Y" 
			:scroll-y="true"
			:scroll-into-view="scrollId"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			refresher-default-style="none" 
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
		<view class="head" :class="{'other': expertInfo && expertInfo.userIdentity > 1}">
			<!-- 导航栏 -->
			<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx" rightWidth="90rpx" color="#fff" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
				<template slot="left" >
					<image v-if="from=='web'" class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
				</template>
				<text class="title" :class="{'color-black': isBlack}">{{isBlack ? expertInfo.expertName : '专家主页'}}</text>
				<template slot="right"></template>
			</uni-nav-bar>
			<view class="expert flex-c">
				<!-- 专家基础信息 -->
				<view class="expert-head color-white flex-r ac">
					<view class="expert-image border-round">
						<lazy-image class="inheritwh border-round" :src="expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					</view>
					<view class="expert-info flex-c">
						<view class="expert-name flex-r ac">
							<text class="text-large">{{expertInfo.expertName}}</text>
							<image v-if="expertInfo.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
						</view>
						<view class="expert-tag text-info flex-r ac">
							<text v-if="expertInfo.hotContineTxt">{{expertInfo.hotContineTxt}}</text>
							<text v-else-if="expertInfo.hitResultTxt">{{expertInfo.hitResultTxt}}</text>
							<!-- <text v-if="(expertInfo.hotContineTxt || expertInfo.hitResultTxt) && expertInfo.userIdentity == 1" space="ensp">{{' | '}}</text> -->
							<!-- <text v-if="expertInfo.userIdentity == 1">{{expertInfo.fansNum || 0}} 粉丝</text> -->
						</view>
					</view>
					<view class="expert-fav flex-r">
						<button class="favbtn active-msg mr30" type="default" plain size="mini" @tap="donateExpert">打赏</button>
						<template v-if="(expertInfo.followStatus == 1 || isFollow.indexOf(expertId) > -1) && noFollow.indexOf(expertId) == -1">
							<button v-if="expertInfo.userIdentity != 1" class="favbtn active-fav" type="warn" size="mini" @tap="noFavExpert(expertId)">取消关注</button>
							<button v-else class="favbtn active-msg" type="warn" size="mini" @tap="$CHS.goChat(expertId, expertInfo.userIdentity)">私信</button>
						</template>
						<button v-else class="favbtn active-fav" type="warn" size="mini" @tap="favExpert(expertId)">关注</button>
					</view>
				</view>
				<!-- 专家简介 -->
				<view class="expert-remark" v-if="expertInfo.remark">
					<text class="text-small color-white">{{expertInfo.remark}}</text>
				</view>
				<!-- 擅长比赛 -->
				<view class="expert-seasontag" v-if="expertInfo.expertSeasonTag && expertInfo.expertSeasonTag.adaptSeasonTag">
					<text class="text-info color-white">擅长联赛：{{expertInfo.expertSeasonTag.adaptSeasonTag.replace(/,/g, '、')}}</text>
				</view>
				<!-- 昨日战绩 -->
				<view class="expert-yesterday flex-r ac" v-if="expertInfo.title">
					<uni-notice-bar class="yesterday-content" color="#FFF" background-color="rgba(0,0,0,0)" :speed="80" scrollable single :text="expertInfo.title"></uni-notice-bar>
				</view>
				<!-- 入驻球吧 -->
				<!-- <view class="expert-ballbar flex-c" v-if="isLogin && ballbarList[0]">
					<text class="text-regular color-white">入驻球吧</text>
					<view class="ballbar-list flex-r ac">
						<view class="ballbar flex-c ac" v-for="(bar, index) in ballbarList" :key="index" @tap="$CHS.goBarHome(bar.id)">
							<lazy-image class="bar-avatar border-round" :src="bar.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
							<text class="bar-name text-info flex-c ac">{{bar.title}}</text>
						</view>
					</view>
				</view> -->
				<!-- 消息免打扰开关 -->
				<!-- <view class="expert-notice flex-r ac jsb" v-if="expertInfo.followStatus === 1 && expertInfo.isDisturb !== null">
					<text class="text-secondary color-white">消息免打扰</text>
					<image v-show="expertInfo.isDisturb == 1" src="@/public/images/expert/gb.png" mode="aspectFit" @tap="switchChange(0)"></image>
					<image v-show="expertInfo.isDisturb == 0" src="@/public/images/expert/dk.png" mode="aspectFit" @tap="switchChange(1)"></image>
				</view> -->
			</view>
		</view>
		<!-- <view class="result flex-c"> -->
			<!-- 命中率折线图 -->
			<!-- <view class="expert-rate" v-if="isLogin && expertInfo.articleStatistics && expertInfo.articleStatistics[0]"> -->
				<!-- <text class="text-primary text-bold">{{query.seasonId ? '联赛' : '近期'}}命中率</text> -->
				<!-- <text class="text-primary text-bold">近期{{lastTab === 0 ? '方案' : '公推'}}命中率</text>
				<HitrateChart class="mt20" :rate="expertInfo.articleStatistics"></HitrateChart>
			</view> -->
			<!-- 方案战绩 -->
			<!-- <view class="expert-score flex-c" v-if="expertInfo.standingsList && expertInfo.standingsList[0]"> -->
				<!-- <text class="text-primary text-bold">{{query.seasonId ? '联赛' : ''}}方案战绩</text> -->
				<!-- <text class="text-primary text-bold">{{lastTab == 0 ? '方案' : '公推'}}战绩</text>
				<view class="result-ball mt20 flex-r">
					<view class="result-ball-list flex-r">
						<view class="flex-r ac">
							<template v-for="(item, index) in expertInfo.standingsList">
								<image class="ball" :key="index" v-if="item.result == 2 && expertInfo.standingsList[index-1] && expertInfo.standingsList[index-1].result == 2" :src="require('@/public/images/article/exp_'+item.result+'_1.png')" mode="aspectFit"></image>
								<image class="ball" :key="index" v-else :src="require('@/public/images/article/exp_'+item.result+(item.result == 1 && item.matchSize ? '_'+item.matchSize : '')+'.png')" mode="aspectFit"></image>
							</template>
						</view>
					</view>
				</view>
			</view> 
		</view>-->
		<view class="body" id="tabCon">
			<!-- tab导航 -->
			<view class="tab flex-r ac jsb" :class="{'fixed navborder': fixed}">
				<template v-for="(item,index) in tabList">
					<view class="tab-list flex-r ac text-primary text-bold color-grey" :class="{'active': tabCur == index}" :key="index" @tap="tabChange(index)">
						<text class="text-regular text-primary text-bold">{{item.name}}</text>
					</view>
				</template>
			</view>
			<view class="tab-body" :class="{'fixed': fixed}" @touchstart="touchStart" @touchend="touchEnd">
				<!-- 方案列表 -->
				<keep-alive>
					<view class="expert-article flex-c" v-if="tabCur == 0">
						<EmptyContent v-if="!articleLists[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的方案" img="qsy_zwxl" :showRefresh="expertInfo.error" @refresh="getLists"></EmptyContent>
						<ArticleList v-else :list="articleLists[tabCur]" type="experthome" :showHead="false" :showBar="true" :showResult="true" :marginTop="false" :showSP="false"></ArticleList>
					</view>
				</keep-alive>
				<!-- 公推列表 -->
				<keep-alive>
					<view class="expert-article pb20 flex-c" v-if="tabCur == 1">
						<EmptyContent v-if="!articleLists[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的公推" img="qsy_zwxl" :showRefresh="expertInfo.error" @refresh="getLists"></EmptyContent>
						<ArticleList v-else :list="articleLists[tabCur]" type="experthome" :showHead="false" :showBar="true" :showResult="true" :marginTop="false" :showSP="false"></ArticleList>
					</view>
				</keep-alive>
				<!-- 讨论贴 -->
				<!-- <keep-alive>
					<view class="expert-share flex-c" v-if="tabCur == 2">
						<EmptyContent v-if="!articleLists[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的话题" img="qsy_zwxl" :showRefresh="expertInfo.error" @refresh="getLists"></EmptyContent>
						<DiscussList v-else :list="articleLists[tabCur]" :showFoot="true" :showBar="true"  :radius="true" type="experthome"></DiscussList>
					</view>
				</keep-alive> -->
				<!-- 晒单 -->
				<keep-alive>
					<view class="expert-share flex-c" v-if="tabCur == 2">
						<EmptyContent v-if="!articleLists[tabCur][0]" top="170rpx" bgColor="#FFF" text="暂无更新的晒单" img="qsy_zwxl" :showRefresh="expertInfo.error" @refresh="getLists"></EmptyContent>
						<ContentList v-else :list="articleLists[tabCur]" :showHead="false" :showBar="true" :showFoot="true" :marginTop="false" :radius="true" type="experthome"></ContentList>
					</view>
				</keep-alive>
				<view class="list-end flex-r pb20" v-if="articleLists[tabCur][0] && tabData[tabCur].isEnd">
					<view class="list-end-line"></view>
					<text v-if="tabCur == 0">加载完成，以上为专家近1个月内发布的内容</text>
					<text v-else>加载完成，以上为专家近2周内发布的内容</text>
					<view class="list-end-line"></view>
				</view>
			</view>
		</view>
		<EmptyContent v-if="expertInfo.error" top="250rpx" text="暂无数据" img="qsy_zwxl" @refresh="getExpertInfo"></EmptyContent>
		</scroll-view>
		<!-- 悬浮按钮 -->
		<view class="button-box flex-c">
			<image src="@/public/images/expert/chzy.png" mode="aspectFit" @tap="$Router.pushTab({name: 'index'})"></image>
			<image src="@/public/images/expert/lhzj.png" mode="aspectFit" @tap="$goByName('experts', {navTab: 'continuousRed', title: '连红推荐'})"></image>
		</view>
		<!-- 打赏弹窗 -->
		<view class="full-screen flex-c ac jc" v-if="isDonate">
			<view class="donate-box flex-c">
				<view class="expert-head flex-r ac">
					<view class="author-image border-round">
						<lazy-image class="image border-round" :src="expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					</view>
					<view class="author-info flex-c">
						<text class="text-large color-white">{{expertInfo.expertName}}</text>
						<view class="info-tag flex-r ac">
							<text class="tag-blue text-hidden" v-if="expertInfo.expertTag">{{expertInfo.expertTag}}</text>
							<text class="tag-red" v-if="expertInfo.hotContineTxt">{{expertInfo.hotContineTxt}}</text>
							<text class="tag-gold" v-else-if="expertInfo.hitResultTxt">{{expertInfo.hitResultTxt}}</text>
						</view>
					</view>
				</view>
				<text class="input-title text-large text-bold">打赏彩虹豆</text>
				<view class="input-box flex-r ac">
					<input type="number" :maxlength="6" class="number" v-model="donateMoney" placeholder-style="color: #B3B3B3;" @input="inputMoney" @confirm="submitDonate" confirm-type="确定" placeholder="请输入打赏彩虹豆"></input>
					<image src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
				</view>
				<view class="submit-box">
					<button type="default" class="active" @tap="submitDonate">确定</button>
				</view>
				<image class="close-icon" src="@/public/images/expert/qxan.png" mode="aspectFit" @tap="isDonate=false;donateMoney=''"></image>
			</view>
		</view>
		<!-- APP下载引导 -->
		<AppDown v-if="platform!='ios'" :bottom="false" :show="true" :style="'bottom:calc('+fromH+' + var(--safe-area-inset-bottom))'"></AppDown>
		<view class="foot " v-if="from!='web'">
			<view class="post-foot-toast flex-r ac jc">
				<text class="text-mini color-blue">观点仅供参考，投注需谨慎，请前往正规渠道购彩，本平台不售彩。</text>
			</view>
			<view class="foot-tab flex-r ac jsb">
				<text @tap="$goByName('index')">首页</text>
				<image class="index-img" src="@/public/images/expert/x1.png" mode="aspectFill"></image>
				<text class="" @tap="$goByName('orderlist')">购买记录</text>
				<image class="index-img" src="@/public/images/expert/x1.png" mode="aspectFill"></image>
				<text class="" @tap="$goByName('userrecharge')">充值中心</text>
				<image class="index-img" src="@/public/images/expert/x1.png" mode="aspectFill"></image>
				<text class="open-app" @tap="getDownapp">打开APP</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBgColor: 'rgba(0,0,0,0)', //导航栏背景色
				isBlack: false, //导航栏文字颜色变黑
				scrollId: '', //ScrollView滚动ID
				scrollTop: 0, //滚动距离
				navBorder: false, //导航栏底部边框
				fixed: false, //方案tab是否固定
				refreshing: false, //刷新状态
				
				expertId: null, //专家ID
				expertInfo: { //专家信息
					error: false
				},
				
				tabList: [ //tab
					// {name: '方案'},{name: '公推'},{name: '话题'},{name: '晒单'}
					{name: '方案'},{name: '公推'},{name: '晒单'}
				],
				tabCur: 0, //当前tab
				tabData: [ //tab数据
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false},
					{pageNo: 1,	isEnd: false},
				],
				lastTab: 0, //记录切换前的tab，方案、公推
				
				articleLists: [[],[],[]], //方案、话题等列表
				ballbarList: [], //入驻球吧列表
				
				isDonate: false, //打赏弹窗是否显示
				donateMoney: '', //打赏金额
				from:"web",
				fromH:0
			}
		},
		components: {
			HitrateChart: () => import("./components/ch-echarts/ch-hitratechart.vue"), //命中率图表
			DiscussList: () => import("@/components/ch-article/ch-discusslist.vue"), //讨论贴列表
			ContentList: () => import("@/components/ch-article/ch-contentlist.vue") //晒单列表
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin() {
				return this.$store.state.isLogin
			},
			isFollow() {
				return this.$store.state.expertFollow
			},
			noFollow() {
				return this.$store.state.expertNoFollow
			}
		},
		onLoad(e) {
			this.from=e.from||'web'
			if(this.from!='web'){
				this.fromH='168rpx'
			}else{
				this.fromH='0rpx'
			}
			this.query = this.$Route.query
			this.expertId = this.query.eid
			if(this.expertId){
				this.getExpertInfo() //查询专家信息
			}else{
				console.log('非法请求');
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试')
			}
		},
		onShow() {
			//更新导航栏背景颜色
			if(this.scrollTop){
				this.setNavBgColor()
			}
			//切换当前tab
			this.changeCurrentTab()
		},
		methods: {
			//滚动监听
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
				if(!this.timeout){
					this.timeout = setTimeout(()=>{
						this.timeout = null
						this.setNavBgColor()
						uni.createSelectorQuery().select('#tabCon').boundingClientRect(res => {
							if(res && res.top < 10){ //计算滚动距离，固定tab栏
								this.fixed = true
								this.navBorder = false
								this.navBgColor = 'rgba(255,255,255,1)'
								this.isBlack = true
							}else{
								this.fixed = false
							}
						}).exec()
					}, 50)
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				//查询专家信息
				this.getExpertInfo()
				//重置列表参数
				this.tabData[this.tabCur].pageNo = 1
				this.tabData[this.tabCur].isEnd = false
				//获取列表数据
				this.getLists()
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//滑动触底加载
			reachBottom() {
				if(!this.tabData[this.tabCur].isEnd){
					this.getLists() //获取列表数据
				}
			},
			//专家信息
			getExpertInfo() {
				let data = {}
				//联赛排行信息
				if(this.query.seasonId && this.query.sportId){
					data.seasonId = this.query.seasonId
					data.sportId = this.query.sportId
				}
				this.$http.get({
					url: '/api/user/article/exportInfo',
					data: {
						expertId: this.expertId,
						...data
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.expertInfo = data.result
						if(this.isLogin){//登录后查询入驻球吧
							this.getExpertBallbar()
						}
						this.getExpertStatus(this.tabCur)
					}else{
						this.$ShowToast({text: data.message || '专家数据加载失败', type: 2, time: 3})
						setTimeout(()=>{
							this.$goBack(1)
						}, 1000)
					}
				}).catch((err) => {
					console.log(err);
					this.expertInfo.error = true
				})
			},
			//专家的料、晒单、动态
			getLists(){
				if(this.tabCur == 0){
					//专家的料
					this.getExpertArticles()
				}
				if(this.tabCur == 1){
					//免费方案
					this.getFreeArticles()
				}
				// if(this.tabCur == 2){
				// 	//话题
				// 	this.getExpertDynamic(6)
				// }
				if(this.tabCur == 2){
					//晒单
					this.getExpertDynamic(2)
				}
			},
			//专家的料
			getExpertArticles() {
				let data = {}
				//联赛排行信息
				if(this.query.seasonId && this.query.sportId){
					data.seasonId = this.query.seasonId
					data.sportId = this.query.sportId
				}
				this.$http.post({
					url: '/api/user/article/list',
					data: {
						enablePay: 1,
						expertId: this.expertId,
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 15,
						...data
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.articleLists, this.tabCur, data.result.records)
						}else{
							this.articleLists[this.tabCur].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//免费的料
			getFreeArticles() {
				this.$http.post({
					url:"/api/user/article/list/free",
					data:{
						enablePay:2,
						expertId: this.expertId,
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 15,
					}
				}).then((data)=>{
					console.log(data,'公推')
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.articleLists, this.tabCur, data.result.records)
						}else{
							this.articleLists[this.tabCur].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
				})
			},
			//专家晒单、动态
			getExpertDynamic(type) {
				this.$http.get({
					url: '/api/user/dynamic/list',
					data: {
						type,
						expertId: this.expertId,
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 10,
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.articleLists, this.tabCur, data.result.records)
						}else{
							this.articleLists[this.tabCur].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//专家入驻的球吧
			getExpertBallbar() {
				this.$http.get({
					url: '/api/forum/user/joined',
					data: {
						expertId: this.expertId
					},
					noLoading: true
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result && data.result[0]){
						this.ballbarList = data.result.slice(0, 5)
					}else{
						this.ballbarList = []
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询专家战绩统计
			getExpertStatus(tabCur) {
				this.$http.get({
					url: '/api/user/article/expert/statistics',
					data: {
						enablePay: tabCur === 1 ? 2 : 1,
						expertId: this.expertId
					},
					noLoading: true
				}).then((data)=>{
					console.log('status', data);
					if(data.success && data.result){
						this.lastTab = tabCur
						this.expertInfo.articleStatistics = data.result.articleStatistics
						this.expertInfo.standingsList = data.result.standingsList
					}
				})
			},
			//消息免打扰开关
			switchChange(isDisturb) {
				console.log(isDisturb);
				this.$http.post({
					url: '/api/appUser/userDisturbExpert',
					data: {
						isDisturb,
						expertId: this.expertId,
						userId: this.$store.state.user.userId
					}
				}).then(data => {
					console.log(data);
					if(data.code == 200 && data.success){
						if(isDisturb == 0){
							this.$ShowToast({text: '消息免打扰已开启'})
							this.expertInfo.isDisturb = 0
						}else{
							this.$ShowToast({text: '消息免打扰已关闭'})
							this.expertInfo.isDisturb = 1
						}
					}else{
						uni.showModal({
							title: '系统提示',
							content: data.message,
							showCancel: false,
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//关注专家
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){ //防止重复提交
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).then( res => {
						console.log(res);
						this.expertInfo.followStatus = 1
					}).catch(err => {
						console.log(err);
					}).finally(()=>{
						this.isFaving = null
					})
				}
			},
			//取消关注专家
			noFavExpert(eid){
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){ //防止重复提交
					return
				}else{
					uni.showModal({
						title:'取消关注',
						content: '您确认要取消关注吗？',
						confirmText: '确认',
						success: (res) => {
							if(res.confirm){
								this.isFaving = eid
								this.$http.post({
									url: '/api/appUser/upcareUserFollow',
									data: {
										commonId: eid,
										type: 2,
										userId: this.user.userId,
									},
								}).then(data => {
									console.log(data);
									if(data.success){
										//this.isFavExpert = false
										this.expertInfo.followStatus = 2
										this.$store.commit('NO_FOLLOW_EXPERT', eid)
										this.$ShowToast({text: '已取消关注'})
										this.$forceUpdate()
									}else{
										uni.showToast({
											title: data.message,
											icon: 'none'
										})
									}
								}).catch((err) => {
									console.log(err);
								}).finally(()=>{
									this.isFaving = null
								})
							}
						}
					})
				}
			},
			//打赏专家
			donateExpert() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				this.isDonate = true
			},
			//输入打赏金额
			inputMoney(e) {
				if(e.target.value < 1){
					uni.showToast({
						title: '打赏彩虹豆不能小于1',
						icon: 'none'
					})
					this.$nextTick(()=>{
						this.donateMoney = ''
					})
				}else{
					this.$nextTick(()=>{
						this.donateMoney = parseInt(e.target.value)
					})
				}
			},
			//提交打赏
			submitDonate() {
				if(this.donateMoney && this.donateMoney > 0){
					if(this.user.chBean < this.donateMoney){
						uni.showModal({
							title: '支付提示',
							content: '您的彩虹豆余额已不足，请充值后再打赏，是否立即充值？',
							success: (res) => {
								if(res.confirm){
									this.$CHS.goRecharge({type: 'expert', id: this.expertId})
								}
							}
						})
						return
					}
					if(this.isSubmit) {
						return
					}
					this.isSubmit = true
					this.$http.post({
						url: '/api/userPayRecord/userRewardExpertBean',
						data: {
							expertId: this.expertId,
							payAmount: this.donateMoney,
							userId: this.user.userId
						}
					}).then(data => {
						console.log(data);
						this.isSubmit = false
						if(data.success){
							this.isDonate = false
							this.donateMoney = ''
							this.$ShowToast({text: data.message || '打赏成功'});
							uni.showToast({
								title: data.message || '打赏成功',
								icon: 'success'
							})
							this.$store.dispatch('updateUserinfo');
						}else{
							uni.showToast({
								title: data.message || '打赏失败',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
						this.isSubmit = false
						uni.showToast({
							title: '打赏失败',
							icon: 'none'
						})
					})
				}else{
					uni.showToast({
						title: '打赏彩虹豆不能小于1',
						icon: 'none'
					})
				}
			},
			//根据来源切换选项卡
			changeCurrentTab() {
				let index = this.$Route.query.tabCur //路由传递的tab
				if(typeof index != "undefined" && index != this.tabCur){
					this.tabChange(index, false); //切换tab
				}else{
					this.tabChange(this.tabCur, false); //切换tab
				}
			},
			//选项卡切换
			tabChange(index, scroll = true) {
				this.tabCur = index;
				if(index == 0 || index == 1){
					if(this.lastTab !== index){
						this.getExpertStatus(index)
					}
				}
				if(!this.articleLists[index][0]){
					this.getLists() //请求数据
				}
				/* if(scroll){//自动滚动
					setTimeout(()=>{//scrollview滚动
						this.scrollId = 'tabCon'
						this.$nextTick(()=>{
							this.scrollId = ''
						})
					}, 50)
				} */
			},
			//触摸滑动开始
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			//触摸滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if(scrollTop > 10 && !this.fixed){
					this.navBorder = true
				}else{
					this.navBorder = false
				}
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			},
			getDownapp(){
				let random = this.$CHS.randomString(10) + Date.now()
				this.$goByName('downapp', {random})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		.scroll-Y{
			height: var(--safe-height);
		}
	}
	.head{
		background: linear-gradient(30deg, #003399 0%, #001133 100%);
		&.other{
			background: linear-gradient(30deg, #4D0000 0%, #260000 100%);
		}
		.expert{
			padding: 20rpx;
			.expert-head{
				.expert-image{
					width: 96rpx;
					height: 96rpx;
					background: #FFFFFF;
					padding: 4rpx;
				}
				.expert-info{
					flex: 2;
					margin-left: 20rpx;
					.expert-name{
						font-weight: 500;
						image{
							margin-left: 8rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
					.expert-tag{
						margin-top: 20rpx;
					}
				}
				.expert-fav{
					.favbtn{
						min-width: 120rpx;
						font-size: 26rpx;
						color: #0055FF;
						height: 60rpx;
						border-radius: 30rpx;
						box-sizing: border-box;
						&.active-fav{
							background-color: #FFFFFF;
							line-height: 60rpx;
							border: none;
						}
						&.active-msg{
							color: #FFFFFF;
							background-color: rgba(0, 0, 0, 0);
							border: 2rpx solid #FFFFFF;
							line-height: 56rpx;
						}
						&.nochat{
							opacity: 0.6;
						}
					}
					.mr30{
						margin-right: 20rpx;
					}
				}
			}
			.expert-remark{
				margin-top: 15rpx;
				line-height: 40rpx;
			}
			.expert-seasontag{
				margin-top: 15rpx;
				height: 40rpx;
				border-radius: 4rpx;
				background: linear-gradient(90deg, #FF0012 0%, #0048FF 100%);
				padding: 0 10rpx;
				.text-info{
					line-height: 40rpx;
				}
			}
			.expert-yesterday{
				margin-top: 15rpx;
				height: 48rpx;
				background-color: rgba(255,255,255, 0.2);
				background-image: url("~@/public/images/expert/zrzj.png");
				background-size: 113rpx 48rpx;
				background-position: left center;
				background-repeat: no-repeat;
				border-radius: 6rpx;
				.yesterday-content{
					margin: 0 0 0 113rpx;
					padding: 0 0 0 10rpx;
					border-radius: 6rpx;
				}
			}
			.expert-card{
				box-sizing: border-box;
				padding: 30rpx;
				margin-top: 15rpx;
				height: 200rpx;
				background-image: url("~@/public/images/expert/yxk_bg.png");
				background-size: 710rpx 200rpx;
				background-position: center center;
				background-repeat: no-repeat;
				justify-content: space-between;
				.card-title{
					font-size: 30rpx;
					font-weight: bold;
					color: #591500;
					line-height: 1;
				}
				.card-price{
					margin-top: 15rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #B36047;
					line-height: 1;
				}
				.card-btn{
					box-sizing: border-box;
					width: 160rpx;
					height: 48rpx;
					background: linear-gradient(90deg, #FFCC33 0%, #F57A00 100%);
					border-radius: 24rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #FFFFFE;
					line-height: 48rpx;
					border: none;
					margin: 0;
					padding: 0;
				}
			}
			.expert-numcard{
				margin-top: 15rpx;
				height: 200rpx;
				padding: 20rpx;
				background-image: url("~@/public/images/expert/bgjfl.png");
				background-size: 710rpx 200rpx;
				background-position: center center;
				background-repeat: no-repeat;
				border-radius: 8rpx;
				box-sizing: border-box;
				.numcard{
					margin-top: 10rpx;
					.numcard-title{
						font-weight: 800;
						color: #0A0099;
					}
					.numcard-des{
						margin-top: 15rpx;
						color: #473DCC;
					}
					.numcard-btn{
						width: 160rpx;
						height: 48rpx;
						background: linear-gradient(90deg, #4D40FF 0%, #1100FF 99%);
						border-radius: 24rpx;
						padding: 0;
						margin: 0;
						border: none;
						box-sizing: border-box;
						font-size: 22rpx;
						line-height: 48rpx;
						color: #FFFFFF;
					}
				}
			}
			.expert-ballbar{
				margin-top: 15rpx;
				width: 710rpx;
				height: 208rpx;
				box-sizing: border-box;
				background-image: url('@/public/images/expert/bar.png');
				background-size: 100%;
				.color-white{
					margin-top: 20rpx;
					margin-left: 20rpx;
					font-weight: 500;
					color: #E5FFFD;
				}
				.ballbar-list{
					margin-top: 15rpx;
					.ballbar{
						width: 20%;
						.bar-avatar{
							width: 80rpx;
							height: 80rpx;
						}
						.bar-name{
							margin-top: 15rpx;
							color: #FFFFFF;
							position: relative;
							/deep/ span{
								z-index: 2;
							}
						}
						.bar-name::after{
							content: "";
							position: absolute;
							width: calc(100% + 10rpx);
							height: 12rpx;
							background: #30F2D0;
							opacity: 0.6;
							bottom: -5rpx;
							z-index: 1;
						}
					}
				}
			}
			.expert-notice{
				margin-top: 15rpx;
				image{
					width: 80rpx;
					height: 48rpx;
				}
			}
		}
	}
	.result{
		padding: 0 20rpx;
		.expert-rate{
			margin-top: 30rpx;
		}
		.expert-score{
			margin-top: 30rpx;
			.result-ball{
				width: 710rpx;
				height: 108rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 10rpx;
				.result-ball-list{
					overflow-x: auto;
					scrollbar-width: none;
					-webkit-overflow-scrolling: touch;
					.ball:last-child{
						margin-right: 0;
					}
				}
			}
			.result-ball::-webkit-scrollbar {
				display: none;
			}
		}
	}
	.body{
		// margin-top: 30rpx;
		.tab{
			height: 88rpx;
			padding: 0 20rpx;
			background: #FFFFFF;
			&.fixed{
				padding: 0 20rpx;
				background: #FFFFFF;
				position: fixed;
				top: 88rpx;
				z-index: 10;
				right: 0;
				left: 0;
				max-width: $max-width;
				margin: $pc-margin;
				box-sizing: border-box;
				.tab-tile{
					flex: 2;
					height: 88rpx;
					display: flex;
					align-items: center;
				}
			}
			.tab-list{
				flex: 2;
				height: 88rpx;
				.text-regular{
					flex: 2;
					text-align: center;
				}
				&.active{
					color: #333333;
					font-weight: 500;
					background-image: url("~@/public/images/expert/hk.png");
					background-repeat: no-repeat;
					background-position: bottom center;
					background-size: 60rpx 8rpx;
				}
			}
			
		}
		.tab-body{
			padding: 20rpx 20rpx 0;
			&.fixed{
				padding-top: 198rpx;
			}
			.expert-share{
				/deep/ .expert-share-list{
					padding: 0;
				}
			}
			/deep/ .empty-content{
				min-height: 853rpx;
				box-sizing: border-box;
			}
		}
	}
	.button-box{
		position: absolute;
		right: 20rpx;
		bottom: calc(260rpx + var(--safe-area-inset-bottom));
		z-index: 10;
		align-items: flex-end;
		image{
			width: 120rpx;
			height: 120rpx;
		}
		image:last-child{
			margin-top: 50rpx;
		}
		@media screen and (min-width: #{$max-width}){
			//right: calc( (100vw - #{$max-width}) / 2 + 20rpx);
		}
	}
	.full-screen{
		z-index: 997;
		.donate-box{
			width: 560rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			.expert-head{
				height: 200rpx;
				padding: 44rpx 30rpx;
				box-sizing: border-box;
				background-image: url("~@/public/images/expert/ds_bg2.png");
				background-position: 0 0;
				background-size: 560rpx 200rpx;
				background-repeat: no-repeat;
				.author-image{
					width: 112rpx;
					height: 112rpx;
					background-color: #FFFFFF;
					background-size: 100%;
					padding: 6rpx;
					box-sizing: border-box;
					.image{
						width: 100%;
						height: 100%;
					}
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-tag{
						margin-top: 20rpx;
						text:first-child{
							margin: 0;
						}
						.tag-blue{
							max-width: 160rpx;
						}
					}
				}
			}
			.input-title{
				margin: 40rpx 30rpx 0;
			}
			.input-box{
				margin: 10rpx 30rpx 0;
				height: 96rpx;
				box-shadow: 0 1rpx 0 0 #E6E6E6;
				.number{
					flex: 2;
					font-size: 26rpx;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.submit-box{
				margin: 60rpx 30rpx;
			}
			.close-icon{
				position: absolute;
				top: 0;
				right: 0;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
	.foot{
		max-width: $max-width;
		width: 750rpx;
		height: 168rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		z-index: 9999;
		.post-foot-toast {
			height: 48rpx;
			background: #E3EBFD;
		}
		.foot-tab{
			padding: 0 30rpx 0 60rpx;
			height: 120rpx;
			font-size: 32rpx;
			font-weight: 500;
			.index-img{
				width: 1rpx;
				height: 39rpx;
			}
			.open-app{
				color: #0055FFFF;
			}
		}
	}
</style>
